<template>
    <div>
        <div v-for="items in phoneList" v-if="phoneList">
            <div v-bind:class="[ items.gender ? manclass : womanclass ]">
                {{items.name}}
            </div>
        </div>
    </div>
</template>

<style>
    .man{
        color:red;
    }
    .woman{
        color:deepskyblue
    }
</style>

<script>
    import axios from 'axios'
    export default {
        components: {
            
        },
        data: () => ({
            phoneList: [],
            manclass: 'man',
            womanclass: 'woman'
        }),
        mounted: function () {
            var self = this;
            axios.get('http://admin-xiaoer.weacar.com/xiaoer/contacts')
            .then(function (response) {
                self.phoneList = response.data.result
            })
            .catch(function (response) {
                console.log(response);
            });
        }     
    }
</script>

